/** @jsx withSlots */
import { Text } from 'office-ui-fabric-react/lib/Text';
import { withSlots, getSlots } from '../../Foundation';

import { I{{componentName}}Component, I{{componentName}}Props, I{{componentName}}Slots } from './{{componentName}}.types';

/**
* {@docCategory {{componentName}}}
*/
export const {{componentName}}View: I{{componentName}}Component['view'] = props => {

  const Slots = getSlots<I{{componentName}}Props, I{{componentName}}Slots>(props, {
    root: 'div',
    text: Text
  });

  return (
    <Slots.root>
      <Slots.text onClick={props.onClick} />
      <br /><span>Status: {props.clicks} clicks</span>
    </Slots.root>
  );
};
